<template>
	<view>
		<u-sticky>
			<view class="tabs_box">
				<!-- 搜索栏优化：增加圆角、调整间距 -->
				<view class="tabs_box_search">
					<u-search :showAction="true" actionText="搜索" :animation="true" v-model="name" placeholder="请输入用户名称"
						@custom="getList(false)" @search="getList(false)" @clear="getList(false)"
						borderRadius="16rpx"></u-search>
				</view>

			</view>
		</u-sticky>

		<view class="list_card" v-for="(item,index) in userList" :class="{act:item.isCheck}" @click="selectUser(item)">
			<view class="list_card_check">
				<radio :value="item.id" :checked="isCheck(item.id)" />
			</view>
			<view class="userList">
				<view class="userList_left">
					<view class="userList_left_name">{{item.name}}</view>
					<view class="userList_left_team">{{item.deptName}}</view>
				</view>
				<view class="userList_right">
					<view class="userList_right_title">{{item.mobile}}</view>
				</view>
			</view>
		</view>

		<bottom-button v-if="type==='pd'" text="派单" @click="handleBtn"></bottom-button>
		<bottom-button v-if="type==='zd'" text="转单" @click="handleBtn"></bottom-button>


		<u-modal :show="modalShow" width="600rpx" showCancelButton title="转单原因" @cancel="modalShow = false"
			@confirm="transfer" :asyncClose="isAsync">
			<template #default>
				<u--textarea v-model="transferInstruction" placeholder="请输入转单原因" count height="90"></u--textarea>
			</template>
		</u-modal>

		<u-modal :show="dispatchShow" width="700rpx" showCancelButton title="派单原因" @cancel="dispatchShow = false"
			@confirm="dispatch" :asyncClose="isAsync">
			<template #default>
				<u--form style="width: 85%;" labelPosition="left" :model="dispatchForm" ref="uForm" labelWidth="80">
					<u-form-item required label="分派人员" prop="imgIds" labelPosition="left">
						<text>
							{{userNames}}
						</text>
					</u-form-item>
					<u-form-item required label="解决方案" prop="imgIds" labelPosition="left">
						<file-upload accept="file" style="margin-top: 12px;" @updataFile="updataImage"></file-upload>
					</u-form-item>
					<u-form-item label="现处单号(选填)" prop="process" labelPosition="left">
						<u--input v-model="dispatchForm['currentTrackingCode']" border="bottom"
							placeholder="请输入现处单号"></u--input>
					</u-form-item>
				</u--form>
			</template>
		</u-modal>

		<u-empty mode="list" style="padding-top: 100rpx;" text="暂无人员" v-if="!userList.length">
		</u-empty>
	</view>
</template>

<script>
	import {
		getUserList,
		dispatch,
		transfer
	} from "@/common/api.js"

	import fileUpload from "@/components/fileUpload.vue"
	import bottomButton from "@/components/bottomButton.vue"
	export default {
		components: {
			bottomButton,
			fileUpload,
		},
		data() {
			return {
				isAsync: false,
				modalShow: false,
				dispatchShow: false,
				userList: [],
				orderType: '', // 用户操作类型  抢单 派单
				repairId: '', // 报修单id
				name: '',
				complete: '',
				problemId: '',
				type: '',
				transferInstruction: '',
				checkType: 'check',
				checkData: [],
				dispatchForm: {
					currentTrackingCode: '',
					imgIds: [],
				},
				fileList: [],
				userNames: '',
				feedbackUserId:'',
			}
		},
		onLoad(e) {
			this.problemId = e.problemId || ''
			this.type = e.type || ''
			this.feedbackUserId = e.feedbackUserId || ''
			this.getList()
		},
		methods: {
			async getList() {
				let res = await getUserList({
					name: this.name
				})
				this.userList = res.data || []

				if (this.feedbackUserId && this.type === 'pd') {
					let userInfo =  this.userList.find(item => item.id === this.feedbackUserId)
					this.checkData.push(userInfo)
				}
			},
			selectUser(item) {
				if (this.checkType === 'radio') {
					this.checkData = [item]
				} else {
					let index = this.checkData.findIndex(c_item => c_item.id === item.id);
					if (index !== -1) {
						this.checkData.splice(index, 1);
					} else {
						this.checkData.push(item);
					}
				}
				// console.log(this.checkData,'this.checkData');
			},
			updataImage(e) {
				this.dispatchForm.imgIds = e
				console.log(this.dispatchForm.imgIds, 'this.dispatchForm.imgIds');
			},
			isCheck(value) {
				let index = this.checkData.findIndex(c_item => c_item.id === value);
				return index !== -1 ? true : false
			},
			handleBtn() {
				if (this.checkData.length === 0) return this.$commonFn.msg('请选择用户')

				switch (this.type) {
					case 'pd':
						this.userNames = this.checkData.map(item => item.name).join(',')
						this.dispatchShow = true
						// this.dispatch()
						break;
					case 'zd':
						this.modalShow = true
						// this.transfer()
						break;
					default:
						break;
				}
			},
			// 但会上一页
			handleBack() {
				let nickName = this.checkData.map(item => item.nickName).join(',')
				let userId = this.checkData.map(item => item.id).join(',')
				uni.$emit('updateDispatchUsers', {
					dispatchUsersName: nickName,
					dispatchUsers: userId,
				})
				this.$commonFn.Navback()
			},

			// 派单
			async dispatch() {
				let that = this

				if (this.dispatchForm.imgIds && this.dispatchForm.imgIds.length === 0) return this.$commonFn.msg(
					'请上传解决方案')
				let userId = that.checkData.map(item => item.id).join(',')


				that.isAsync = true
				uni.showLoading({
					title: '数据提交中',
					mask: true
				});
				let _res = await dispatch({
					// repairUserId: userId,
					acceptUserId: userId,
					problemId: that.problemId,
					problemStatus: '3',

					currentTrackingCode: that.dispatchForm.currentTrackingCode,
					bizType: 'problem_complete_file',
					problem_complete_file: that.dispatchForm.imgIds.map(item => item.fileId).join(',')
				})
				that.dispatchShow = true
				if (_res.code == '00000') {
					that.$commonFn.msg('派单成功')
					uni.hideLoading();
					setTimeout(() => {
						that.$commonFn.Navback()
					}, 500)
				}
				uni.hideLoading();

				return

			},
			// 转单
			async transfer() {
				let that = this
				if (!this.transferInstruction.trim()) return this.$commonFn.msg('请填写转单原因')
				let name = that.checkData.map(item => item.name).join(',')
				let userId = that.checkData.map(item => item.id).join(',')
				that.isAsync = true
				uni.showLoading({
					title: '数据提交中',
					mask: true
				});
				let _res = await transfer({
					// repairUserId: userId,
					acceptUserId: userId,
					problemId: that.problemId,
					problemStatus: '3'
				})
				that.modalShow = false
				if (_res.code == '00000') {
					that.$commonFn.msg('转单成功')
					uni.hideLoading();
					setTimeout(() => {
						that.$commonFn.Navback()
					}, 500)
				}
				uni.hideLoading();


			},


		}
	}
</script>

<style scoped lang="scss">
	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32rpx;
	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}

	.list_card {
		margin: 24rpx;
		display: flex;
		align-items: center;

		&_check {

			padding-right: 16rpx;
		}
	}

	.userList {
		padding: 24rpx;
		background-color: #fff;
		// border-bottom: 1px solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 卡片阴影
		flex: 1;

		&_left {
			&_name {
				font-size: 16px;
				color: #3b4144;
			}

			&_team {
				margin-top: 3px;
				color: #999;
				font-size: 12px;
			}
		}

		&_right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			&_title {
				color: #999;
				font-size: 14px;
			}

			&_num {
				margin-top: 3px;
			}
		}
	}

	.listbox {
		position: relative;

	}

	::v-deep .uni-list-chat {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.act {
		background-color: #a0cfff;
		color: #fff !important;

		.uni-list-chat__content-title {
			color: #000
		}

		.uni-list-chat__content-extra-text {
			color: #000
		}

		.draft,
		.uni-list-chat__content-note {
			color: #000
		}
	}

	::v-deep uni-modal .uni-modal {
		z-index: 99999 !important;
	}

	::v-deep .u-modal__content {
		padding: 0 !important;
	}
</style>